<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
</head>
<body>
  BFC是什么？怎么触发？解决了什么问题？

  文档流分为：1.普通流 2.定位流 3.浮动流

  BFC：Block Formatting context 块级格式化上下文
      形成一种被隔离的区间（BFC的子元素不会对外面的元素产生影响）
  
  开启BFC：
  1.body 就是BFC元素
  2.float: left| right
  3.overflow: hidden | scroll | auto 不能是visible
  4.display: inline-block | table-cell | table-caption | flex | grid 
    非none inline block 
  5.position: absolute | fixed 不能是relative

  BFC解决问题：
  1.margin 重合
  2.margin 塌陷
  3.高度坍塌




</body>
</html>